<template>
  <div class="floor-container-box">
    <div class="floor-container" :style="{'height':mainHeight+'px'}">
      <div class="draggable-box-left floor">
        <div class="scroll-box">
          <div class="left-part"
            v-for="(item, index) in templateArrayMenu"
            :key="`left${index}`">
            <h3 class="part-head">{{item.title}}</h3>
            <draggable v-model="item.list" :options="tplOptions" class="tpl-list">
              <div class="tpl-item"
                v-for="(tagItem, tagIndex) in item.list"
                :key="`tag${tagIndex}`"
                :class="'item-' + tagItem.tpl_id">
                <div class="img-tpl"></div>
                <span class="text-tpl">{{ templates[tagItem.tpl_id].title }}</span>
              </div>
            </draggable>
          </div>
        </div>
        <div class="left-bottom">
          <el-button @click="handleSavePage">保存</el-button>
          <el-button v-if="pgId" type="primary" @click="handleSavePutPage">发布</el-button>
        </div>
      </div>
      <div class="draggable-box">
        <div class="phone-like">
          <div class="floor-top"></div>
          <div class="floor-body" :style="{'background': bodyBack}">
            <draggable v-model="floorList" :options="floorOptions" class="floor-list">
              <div
                class="floor-item"
                v-for="(target, index) in floorList"
                :key="`${index}${target.tpl_id}`"
                :class="{'active': activeBlock===index}">
                <div class="item-out" @click="handleEditFloor(index, JSON.parse(JSON.stringify(target)))">
                  <component
                    :is="templates[target.tpl_id]"
                    :data="JSON.parse(JSON.stringify(target))"
                    is-edit>
                  </component>
                </div>
                <div class="panel-handle">
                  <span class="icon-handle handle-delete" @click="handleDeleteFloor(index)"><svg-icon icon-class="delete"/></span>
                </div>
              </div>
            </draggable>
          </div>
        </div>
        <div class="set-tag" :class="{'active': rightShow===0}" @click="handleEditPage()"><i></i>页面设置</div>
      </div>
      <div class="draggable-box-right">
        <en-page-picker
          :show="rightShow===0"
          :default-data="defaultPageData"
          @confirm="handlePagePickerConfirm"
        />
        <en-swiper-picker
          :show="rightShow===60"
          :default-data="defaultSwiperData"
          @confirm="handleSwiperPickerConfirm"
        />
        <en-advert-picker
          :show="rightShow===61"
          :default-data="defaultAdvertData"
          @confirm="handleAdvertPickerConfirm"
        />
        <en-text-picker
          :show="rightShow===62"
          :default-data="defaultTextData"
          @confirm="handleTextPickerConfirm"
        />
        <en-goods-picker
          :show="rightShow===63"
          :default-data="defaultGoodsData"
          @confirm="handleGoodsPickerConfirm"
        />
        <en-search-picker
          :show="rightShow===64"
          :default-data="defaultSearchData"
          @confirm="handleSearchPickerConfirm"
        />
        <en-space-picker
          :show="rightShow===65"
          :default-data="defaultSpaceData"
          @confirm="handleSpacePickerConfirm"
        />
        <en-coupon-picker
          :show="rightShow===66"
          :default-data="defaultCouponData"
          @confirm="handleCouponPickerConfirm"
        />
        <en-group-buy-picker
          :show="rightShow===68"
          :default-data="defaultGroupBuyData"
          @confirm="handleGroupBuyPickerConfirm"
        />
        <en-seckill-picker
          :show="rightShow===69"
          :default-data="defaultSeckillBuyData"
          @confirm="handleSeckillBuyPickerConfirm"
        />
        <en-near-shop-picker
          :show="rightShow===70"
          :default-data="defaultNearShopData"
          @confirm="handleNearShopPickerConfirm"
        />
        <en-video-picker
          :show="rightShow===71"
          :default-data="defaultVideoData"
          @confirm="handleVideoPickerConfirm"
        />
        <en-follow-picker
          :show="rightShow===73"
          :default-data="defaultFollowData"
          @confirm="handleFollowPickerConfirm"
        />
        <en-nearby-shops-picker 
          :show="rightShow===75"
          :default-data="defaultNearbyShopsData"
          @confirm="handleNearbyShopsConfirm"
        />
        <en-video-swiper-picker 
          :show="rightShow===76"
          :default-data="defaultVideoSwiperData"
          @confirm="handleVideoSwiperConfirm"
        />
        <en-she-tuan-picker
          :show="rightShow===9001"
          :default-data="defaultSheTuanData"
          @confirm="handleSheTuanPickerConfirm"
        />
      </div>
    </div>
  </div>
</template>

<script>
  import draggable from 'vuedraggable'
  import * as API_Page from '@/api/page'
  import templates, { templateArray, templateArrayMenu } from './templates'
  import { haddingDefault } from './haddingData.js'

  export default {
    name: 'mobileFloorManage',
    components: { draggable },
    data() {
      return {
        mainHeight: 560,
        // 页面Id
        pgId: this.$route.params.pgId,
        // 页面基础信息
        baseData: {},
        /** 默认页面数据 */
        defaultPageData: {},
        // 获取商品列表API
        goodsListApi: 'admin/goods',
        // 根据商品id，获取商品列表API
        multipleGoodsApi: 'admin/goods/@ids/details',
        templates,
        templateArray,
        templateArrayMenu,
        /** 模板列表 */
        tplList: [],
        /** 模板配置 */
        tplOptions: {
          group: { name: 'tplGroup', pull: 'clone', put: false },
          sort: false,
          handle: '.tpl-item'
        },
        bodyBack: '#f9f9f9',
        /** 楼层列表 */
        floorList: [],
        /** 楼层配置 */
        floorOptions: {
          animation: 150,
          group: { name: 'tplGroup', put: true },
          sort: true,
          handle: '.floor-item'
        },
        activeBlock: null,
        rightShow: 0,
        dialogSwiperShow: false,
        dialogImageShow: false,
        dialogGoodsShow: false,
        dialogTextShow: false,
        dialogSecKillShow: false,
        /** 图片默认数据 */
        defaultImageData: '',
        /** 商品默认数据 */
        defaultGoodsData: {},
        /** 轮播图默认数据 */
        defaultSwiperData: {},
        /** 图片广告默认数据 */
        defaultAdvertData: {},
        /** 文本默认数据 */
        defaultTextData: {},
        /** 商品搜索默认数据 */
        defaultSearchData: {},
        /** 辅助间隔默认数据 */
        defaultSpaceData: {},
        /** 优惠券默认数据 */
        defaultCouponData: {},
        /** 秒杀默认数据 */
        defaultSecKillData: {},
        /** 团购默认数据 */
        defaultGroupBuyData: {},
        /** 附近店铺默认数据 */
        defaultNearShopData: {},
        /** 视屏组件默认数据 */
        defaultVideoData: {},
        /** 关注公众号默认数据 */
        defaultFollowData: {},
        /** 社区团购默认的数据 */
        defaultSheTuanData: {},
        /** 秒杀默认的数据 */
        defaultSeckillBuyData: {},
        /** 附近发现页的数据 */
        defaultNearbyShopsData: {},
        /** 视频轮播图 */
        defaultVideoSwiperData: {}
      }
    },
    beforeRouteUpdate(to, from, next) {
      this.pgId = to.params.id
      if (this.pgId) {
        this.GET_PageData(this.pgId)
      }
      next()
    },
    activated() {
      this.pgId = this.$route.params.id
      if (this.pgId) {
        this.GET_PageData(this.pgId)
      }
    },
    mounted() {
      this.computClient();
      // 2、挂载 reisze 事件 → 屏幕缩放时监听宽高变化
      window.onresize = () => {
        return (() => {
          this.computClient();
        })();
      };
      if (this.pgId) {
        this.GET_PageData(this.pgId)
      }
    },
    methods: {
      /*
        * @date 2020-11-10
        * @author wolfMan
        * @description {计算窗口宽高}
      */
      computClient () {
        this.$nextTick(() => {
          const _clientHeight = document.documentElement.clientHeight;
          this.mainHeight = _clientHeight - 80 - 44; // 61 头高度
        });
      },
      /*
        * @date 2020-02-13
        * @author wolfMan
        * @description {删除楼层组件}
      */
      handleDeleteFloor (index) {
        this.floorList.splice(index, 1);
        if (index === 0) {
          this.handleEditPage();
        } else {
          let _index = index - 1;
          this.handleEditFloor(_index, JSON.parse(JSON.stringify(this.floorList[_index])))
        }
      },
      /*
        * @date 2020-02-13
        * @author wolfMan
        * @description {显示楼层需要编辑的模块}
      */
      handleEditFloor (index, target) {
        console.log(target)
        // haddingDefault(target);
        let _editOptions = { index, target }
        if (JSON.stringify(_editOptions)===JSON.stringify(this.editOptions)) {
          return
        }
        this.editOptions = _editOptions
        this.activeBlock = index
        const tplId = target.tpl_id
        let blockData = !target.blockList ? [] : JSON.parse(JSON.stringify(target.blockList))
        let blockStyle = !target.blockStyle ? {} : JSON.parse(JSON.stringify(target.blockStyle))
        let blockClass = !target.blockClass ? '' : JSON.parse(JSON.stringify(target.blockClass))
        let blockType = !target.blockType && target.blockType!==0 ? '' :  JSON.parse(JSON.stringify(target.blockType));
        let blockColor = !target.blockColor ? '' :  JSON.parse(JSON.stringify(target.blockColor));
        switch (tplId) {
          case 60: // 轮播图
            this.defaultSwiperData = {
              data: blockData,
              style: blockStyle
            };
            break;
          case 61: // 图片广告
            this.defaultAdvertData = {
              data: blockData,
              style: blockStyle
              // data: !target.dataSource ? '' : target.dataSource.data,
              // style: !target.dataSource ? '' : target.dataSource.style
            };
            // this.defaultAdvertData.style.listStyle = target.blockClass;
            break;
          case 62: // 标题
            this.defaultTextData = {
              title: blockData[0].block_value,
              opt: blockData[0].block_opt,
              style: blockStyle
            };
            break;
          case 63: // 商品
            this.defaultGoodsData = {
              data: !target.dataSource ? '' : target.dataSource.data,
              style: !target.dataSource ? blockStyle : target.dataSource.style,
              title: !target.dataSource ? JSON.parse(JSON.stringify(target.blockTitle)) : target.dataSource.title
            };
            this.defaultGoodsData.style.listStyle = target.blockClass;
            break;
          case 64: // 搜索
            this.defaultSearchData = {
              class: blockClass,
              style: blockStyle
            }
            break;
          case 65: // 间隔
            this.defaultSpaceData = {
              style: blockStyle
            }
            break;
          case 66: // 优惠券
            this.defaultCouponData = {
              blockList: blockData[0].block_value.id ? blockData : [],
              blockType: blockType,
              blockClass: blockClass,
              blockColor: blockColor,
              style: blockStyle
            };
            break;
          // case 67: // 秒杀
          //   this.defaultSecKillData = {
          //     style: blockStyle
          //   };
          //   break;
          case 68: // 团购
            this.defaultSeckillBuyData = {
              dataSource: !target.dataSource ? '' : target.dataSource,
              data: blockData,
              style: blockStyle
            };
            this.defaultGroupBuyData.style.listStyle = target.blockClass;
            break;
          case 69: // 限时秒杀
            this.defaultGroupBuyData = {
              style: !target.dataSource ? blockStyle : target.dataSource,
              blockType: target.blockType
            };
            break;
          case 70: // 附近门店
            this.defaultNearShopData = target.blockStyle
            break;
          case 71: // 视屏
            this.defaultVideoData = !target.dataSource ? '' : target.dataSource;
            break;
          case 73: // 关注公众号
            this.defaultFollowData = !target.dataSource ? {} : target.dataSource;
            break;
          case 75: // 附近发现页
            this.defaultNearbyShopsData = {
              blockStyle: !target.dataSource ? target.blockStyle : target.dataSource.style,
              shopsPic: !target.dataSource ? [] : target.dataSource.data.shopsPics,
              shopsId: !target.dataSource ? target.shopsId : target.dataSource.data.shopIds
            };
            break;
          case 76: // 视频轮播
            this.defaultVideoSwiperData = {
              blockList: !target.dataSource ? target.blockList : target.dataSource
            };
            break;
          case 9001: // 社区团购
            this.defaultSheTuanData = {
              style: !target.dataSource ? blockStyle : target.dataSource
            };
            // this.defaultSheTuanData.style.listStyle = target.dataSource.listStyle;
            break;
          default:
            break;
        }
        this.rightShow = tplId;
      },
      /*
        * @date 2020-02-13
        * @author wolfMan
        * @description {显示页面修改模块}
      */
      handleEditPage () {
        this.rightShow = 0;
      },
      /** 页面基础信息确认 */
      handlePagePickerConfirm(data) {
        this.baseData = data;
      },
      /** 轮播图确认 */
      handleSwiperPickerConfirm(data) {
        let { index, target } = this.editOptions;
        let _blockList = [];
        data.itemList.forEach(item => {
          let _blockItem = {
            block_type: 'IMAGE',
            block_value: {
              img_url: item.imgUrl,
              img_title: item.title
            },
            block_opt: {
              opt_type: item.opt.type,
              opt_name: item.opt.name,
              opt_value: item.opt.value
            }
          }
          _blockList.push(_blockItem)
        })
        target.blockList = _blockList;
        target.blockStyle = data.style;
        target.dataSource = data;
        this.$set(this.floorList, index, target)
      },
      /** 图片广告确认 */
      handleAdvertPickerConfirm(_formValue) {
        let { index, target } = this.editOptions;
        target.dataSource = _formValue;
        let _blockList = target.blockList;
        let data = _formValue.data;
        _blockList = data.map(item => {
          return {
            block_type: 'IMAGE',
            block_value: {
              'img_url': item.url
            },
            block_opt: {
              'opt_type': item.opt.type,
              'opt_name': item.opt.name,
              'opt_value': item.opt.value
            }
          };
        });
        target.blockList = _blockList;
        delete _formValue.style.listStyle;
        target.blockStyle = _formValue.style;
        this.$set(this.floorList, index, target);
      },
      /** 文本选择器确认 */
      handleTextPickerConfirm(data) {
        let { index, target } = this.editOptions
        let block = target.blockList[0]
        block.block_value = data.value.title
        block.block_opt = {
          'opt_type': data.style.opt.type,
          'opt_name': data.style.opt.name,
          'opt_value': data.style.opt.value
        };
        delete data.style.opt
        target.blockStyle = data.style
        target.dataSource = data;
        this.$set(this.floorList, index, target)
      },
      /** 商品选择器确认 */
      handleGoodsPickerConfirm(formValue) {
        console.log(formValue)
        let _formValue = this.MixinClone(formValue);
        let { index, target } = this.editOptions;
        const { data, style, title } = _formValue;
        let _blockList = target.blockList;
        if (data.goods && data.goods.length) {
          _blockList = data.goods.map(item => {
            return {
              block_type: 'GOODS',
              block_value: {
                'id': item.goods_id
              },
              block_opt: {
                'opt_type': 'GOODS',
                'opt_value': item.goods_id
              }
            };
          });
        }
        target.blockClass = style.listStyle;
        delete style.listStyle;
        const { type, name, value } = title.block_opt;
        title.block_opt = {
          'opt_type': type,
          'opt_name': name,
          'opt_value': value
        }
        target.blockList = _blockList;
        target.blockType = 'GOODS';
        target.blockStyle = style;
        target.blockTitle = title;
        target.dataSource = formValue;
        this.$set(this.floorList, index, target);
      },
      /** 商品搜索确认 */
      handleSearchPickerConfirm(data) {
        let { index, target } = this.editOptions
        target.blockClass = data.blockClass
        delete data.blockClass
        target.blockStyle = data
        this.$set(this.floorList, index, target)
      },
      /** 辅助间隔确认 */
      handleSpacePickerConfirm(data) {
        let { index, target } = this.editOptions
        target.blockStyle = data
        this.$set(this.floorList, index, target)
      },
      /** 优惠券确认 */
      handleCouponPickerConfirm(data) {
        let { index, target } = this.editOptions
        let _listVal = data.blockList.map(item => {
          return {
            block_type: 'COUPON',
            block_value: {
              id: item.id
            },
            block_opt: ''
          };
        })
        target.blockList = _listVal;
        target.blockType = data.blockType
        target.blockClass = data.blockClass
        target.blockColor = data.blockColor
        target.blockStyle = data.style
        this.$set(this.floorList, index, target)
      },
      /** 图片上传组件确认 */
      handleImagePickerConfirm(fileList) {
        const file = fileList[0]
        let opt = file ? file.operation : {}
        let url = file ? file.response.url : ''
        let { index, target, targetIndex } = this.editOptions
        target.blockList[targetIndex].block_value = url
        target.blockList[targetIndex].block_opt = opt
        this.$set(this.floorList, index, target)
      },
      /** 拼团选择器确认 */
      handleGroupBuyPickerConfirm(_formValue) {
        let { index, target } = this.editOptions;
        let data = _formValue.data;
        let _blockList = target.blockList;
        if (data.skuIds && data.skuIds.length) {
          _blockList = data.skuIds.map(item => {
            return {
              block_type: 'GOODS',
              block_value: {
                'id': item
              },
              block_opt: {
                'opt_type': 'GOODS',
                'opt_value': item
              }
            };
          });
        }
        target.blockList = _blockList;
        target.blockClass = _formValue.style.listStyle;
        delete _formValue.style.listStyle;
        target.blockStyle = _formValue.style;
        target.dataSource = _formValue;
        this.$set(this.floorList, index, target);
      },
      /**
        * @date 2021/01/12
        * @author kaiqiang
        * @description { 秒杀组件确认 }
      */
      handleSeckillBuyPickerConfirm(data) {
        let { index, target } = this.editOptions;
        let { style } = data;
        target.blockClass = style.listStyle;
        target.blockType = 'SECKILL';
        target.blockStyle = style;
        target.dataSource = style;
        this.$set(this.floorList, index, target);
      },
      /**
        * @date 2021/03/10
        * @author kaiqiang
        * @description { 附近发现页的店铺 }
      */
      handleNearbyShopsConfirm(val) {
        let { index, target } = this.editOptions;
        let { style, data } = val;
        target.blockStyle = style;
        target.dataSource = val;
        this.$set(this.floorList, index, target);
      },
      /**
        * @date 2021/01/14
        * @author wolfMan
        * @description {关注公众号组件确认}
      */
      handleFollowPickerConfirm(data) {
        let { index, target } = this.editOptions;
        target.blockClass = data.blockClass;
        target.blockStyle.pagePadding = data.pagePadding;
        let block = target.blockList[0];
        block.block_opt = {
          'opt_type': 'TEXT',
          'opt_name': '',
          'opt_value': data.url
        };
        target.dataSource = data;
        this.$set(this.floorList, index, target);
      },
      /**
        * @date 2020/12/07
        * @author kaiqiang
        * @description { 社区团购选择器确认 }
      */
      handleSheTuanPickerConfirm(data) {
        console.log(data)
        let { index, target } = this.editOptions;
        let { style } = data;
        target.blockClass = style.listStyle;
        target.blockType = 'SHETUAN';
        target.blockStyle = style;
        target.dataSource = style;
        this.$set(this.floorList, index, target);
      },
      /** 辅助间隔确认 */
      handleNearShopPickerConfirm(data) {
        let { index, target } = this.editOptions
        target.blockStyle = data
        this.$set(this.floorList, index, target)
      },
      /** 视屏组件器确认 */
      handleVideoPickerConfirm(formValue) {
        let _formValue = this.MixinClone(formValue);
        let { index, target } = this.editOptions;
        const { listStyle, videoList, radius, pagePadding, videoPadding, showTitle, showDes, showTime } = _formValue;
        let _blockList = target.blockList;
        if (videoList && videoList.length) {
          _blockList = videoList.map(item => {
            let { imgUrl, title, desc, videoUrl, timeShow } = item;
            return {
              block_type: 'VIDEO',
              block_value: {
                'video_url': videoUrl,
                'video_image': imgUrl,
                'video_name': title,
                'video_des': desc,
                'video_time': timeShow
              },
              block_opt: {
                'opt_type': 'VIDEO',
                'opt_value': item
              }
            };
          });
        }
        target.blockList = _blockList;
        target.blockClass = listStyle;
        target.blockType = 'VIDEO';
        target.blockStyle = {
          radius,
          pagePadding,
          videoPadding,
          showTitle,
          showDes,
          showTime
        };
        target.dataSource = formValue;
        this.$set(this.floorList, index, target);
      },
      /**
        * @date 2021/04/29
        * @author kaiqiang
        * @description { 视频轮播组件 }
      */
      handleVideoSwiperConfirm(data) {
        console.log(data)
        let _data = this.MixinClone(data);
        let { index, target } = this.editOptions;
        console.log(index)
        console.log(target)
        const { itemList, style } = _data;
        let _itemList = target.blockList;
        if (itemList && itemList.length) {
          _itemList = itemList.map(item => {
            let { imgUrl, title, videoUrl, timeShow } = item;
            return {
              block_type: 'VIDEO',
              block_value: {
                'video_url': videoUrl,
                'video_image': imgUrl,
                'video_name': title,
                'video_time': timeShow
              },
              block_opt: {
                'opt_type': 'VIDEO',
                'opt_value': item
              }
            };
          });
        }
        target.blockList = _itemList;
        target.blockClass = style;
        target.blockType = 'VIDEO';
        target.dataSource = itemList;
        this.$set(this.floorList, index, target);
      },
      /** 保存 */
      handleSavePage() {
        let _floolList = this.MixinClone(this.floorList);
        _floolList = _floolList.map(item => {
          let _back = item;
          if (_back.tpl_id===63 || _back.tpl_id===66 || _back.tpl_id===67 || _back.tpl_id===68 || _back.tpl_id===70) {
            if (_back.blockList.length && !_back.blockList[0].block_value.id) {
              _back.blockList.length = 0;
            }
          }
          return _back;
        });
        let _params = {
          page_data: JSON.stringify(_floolList)
        };
        Object.assign(_params, this.baseData);
        if (this.pgId) {
          API_Page.editPage(this.pgId, _params).then(() => this.$message.success('保存成功！'))
        } else {
          _params.page_type = '0';
          _params.owner_type = '0';
          API_Page.addPage(_params).then(() => this.$message.success('保存成功！'))
        }
      },
      /** 发布 */
      handleSavePutPage() {
        let _floolList = this.MixinClone(this.floorList);
        _floolList = _floolList.map(item => {
          let _back = item;
          if (_back.tpl_id===63 || _back.tpl_id===66 || _back.tpl_id===67 || _back.tpl_id===68) {
            if (_back.blockList.length && !_back.blockList[0].block_value.id) {
              _back.blockList.length = 0;
            }
          }
          return _back;
        });
        let _params = {
          page_data: JSON.stringify(_floolList)
        };
        Object.assign(_params, this.baseData);
        API_Page.editPutPage(this.pgId, _params).then(() => this.$message.success('发布成功！'))
      },
      /** 获取楼层数据 */
      GET_PageData(id) {
        API_Page.getPage('WAP', 'DEFINED', id).then(response => {
          console.log(response)
          const { page_data } = response
          let _floorList = page_data ? JSON.parse(page_data) : [];
          _floorList = _floorList.filter(item => item.tpl_id >= 60);
          console.log(_floorList);
          this.$nextTick(() => {
            this.floorList = _floorList
          })
          this.baseData = {
            page_type: response.page_type,
            page_name: response.page_name,
            page_desc: response.page_desc,
            background: response.background,
            share_image: response.share_image
          }
          this.defaultPageData = JSON.parse(JSON.stringify(this.baseData));
          this.activeBlock = null;
          this.handleEditPage();
        })
      }
    }
  }
</script>

<style type="text/scss" lang="scss" scoped>
  @import "./templates/floor-mobile";

  .floor-container-box {
    position: relative;
    top: 0;
  }
  .floor-container {
    display: flex;
    position: relative;
    margin: -10px;
    padding: 10px 360px 10px 180px;
    height: 660px;
    box-sizing: border-box;
    overflow: hidden;
    background-color: #f2f2f2;
  }
  .draggable-box-left {
    display: flex;
    flex-flow: column;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    width: 180px;
    background-color: #fff;
    overflow: hidden;
    .scroll-box {
      position: relative;
      flex: 1;
      overflow-y: auto;
      &::-webkit-scrollbar {
        width: 0;
      }
      .left-part {
        padding: 20px;
        box-sizing: border-box;
      }
      .part-head {
        padding: 10px 0;
        margin: 0;
        line-height: 20px;
        box-sizing: border-box;
        opacity: .85;
        color: #333333;
        font-size: 14px;
        font-weight: 700;
      }
    }
    .left-bottom {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 15px;
      width: 180px;
      box-sizing: border-box;
      box-shadow: 0 -2px 3px 0 #e6e6e6;
      background: #fff;
      .el-button {
        width: 70px;
        height: 36px;
      }
    }
  }
  .draggable-box {
    flex: 1;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 50%;
    overflow-y: auto;
    &::-webkit-scrollbar {
      width: 0;
    }
    .set-tag {
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      top: 5px;
      right: 20px;
      padding: 10px;
      height: 26px;
      border-radius: 2px;
      box-sizing: border-box;
      box-shadow: 0 0 4px 0 #cacaca;
      cursor: pointer;
      background: #fff;
      color: #666;
      font-size: 12px;
      &.active {
        background: #3870EA;
        color: #fff;
      }
    }
  }
  .tpl-list {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
  }
  .tpl-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
    width: 70px;
    height: 80px;
    border-radius: 2px;
    box-sizing: border-box;
    cursor: move;
    color: #666;
    &.item-60 .img-tpl { background-position: -19px -12px }
    &.item-61 .img-tpl { background-position: -69px -12px }
    &.item-62 .img-tpl { background-position: -19px -87px }
    &.item-63 .img-tpl { background-position: -69px -87px }
    &.item-64 .img-tpl { background-position: -19px -170px }
    &.item-65 .img-tpl { background-position: -69px -170px }
    &.item-66 .img-tpl { background-position: -19px -250px }
    &.item-67 .img-tpl { background-position: -69px -250px }
    &.item-68 .img-tpl { background-position: -18px -325px }
    &.item-69 .img-tpl { background-position: -69px -325px }
    &.item-70 .img-tpl { background-position: -18px -407px }
    &.item-71 .img-tpl { background-position: -18px -407px }
    &.item-72 .img-tpl { background-position: -18px -487px }
    &.item-73 .img-tpl { background-position: -18px -487px }
    &.item-74 .img-tpl { background-position: -18px -487px }
    &.item-75 .img-tpl { background-position: -18px -487px }
    &.item-76 .img-tpl { background-position: -19px -12px }
    &.item-9000 .img-tpl { background-position: -69px -407px }
    &.item-9001 .img-tpl { background-position: -18px -487px }

    &.item-23 .img-tpl { background-position: -19px -12px }
    &.item-24 .img-tpl { background-position: -19px -87px }
    &.item-25 .img-tpl { background-position: -19px -170px }
    &.item-26 .img-tpl { background-position: -19px -250px }
    &.item-27 .img-tpl { background-position: -19px -325px }
    &.item-28 .img-tpl { background-position: -69px -12px }
    &.item-29 .img-tpl { background-position: -69px -87px }
    &.item-30 .img-tpl { background-position: -69px -170px }
    &.item-31 .img-tpl { background-position: -69px -250px }
    &.item-32 .img-tpl { background-position: -660px 0 }
    &.item-34 .img-tpl { background-position: -360px 0 }
    &.item-37 .img-tpl { background-position: -480px 0 }
    &.item-42 .img-tpl { background-position: -540px 0 }
    &.item-0 .img-tpl { background-position: -540px 0 }
    &:hover {
      background-color: #3870EA;
      color: #fff;
      &.item-60 .img-tpl { background-position: -19px -49px }
      &.item-61 .img-tpl { background-position: -69px -49px }
      &.item-62 .img-tpl { background-position: -19px -129px }
      &.item-63 .img-tpl { background-position: -69px -129px }
      &.item-64 .img-tpl { background-position: -19px -210px }
      &.item-65 .img-tpl { background-position: -69px -210px }
      &.item-66 .img-tpl { background-position: -19px -288px }
      &.item-67 .img-tpl { background-position: -69px -288px }
      &.item-68 .img-tpl { background-position: -18px -367px }
      &.item-69 .img-tpl { background-position: -69px -367px }
      &.item-70 .img-tpl { background-position: -18px -448px }
      &.item-71 .img-tpl { background-position: -18px -448px }
      &.item-72 .img-tpl { background-position: -18px -527px }
      &.item-73 .img-tpl { background-position: -18px -527px }
      &.item-74 .img-tpl { background-position: -18px -527px }
      &.item-75 .img-tpl { background-position: -18px -527px }
      &.item-76 .img-tpl { background-position: -19px -49px }
      &.item-9000 .img-tpl { background-position: -69px -448px }
      &.item-9001 .img-tpl { background-position: -18px -527px }
    }
  }
  .img-tpl {
    width: 40px;
    height: 40px;
    background: url("../../../assets/img-icon.png") no-repeat;
    background-size: 128px 584px;
  }
  .text-tpl {
    margin-top: 10px;
    font-size: 12px;
  }
  .phone-like {
    position: relative;
    margin: 0 auto;
    min-height: 601px;
    box-shadow: 0 0 14px 0 rgba(0,0,0,.1);
  }
  .floor-top {
    width: 375px;
    height: 20px;
    background: url("../../../assets/phone-top.png") no-repeat;
    background-size: cover;
  }
  .floor-body {
    width: 375px;
    min-height: 667px - 24px;
    overflow: visible;
  }
  .floor-list {
    width: 375px;
    min-height: 667px - 24px;
    // overflow-x: hidden;
  }
  .floor-item {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    .item-out {
      position: relative;
      &::before {
        display: block;
        content: '';
        position: absolute;
        top: 0;
        left: -1px;
        z-index: -1000;
        width: 377px;
        height: 100%;
        z-index: 10;
        border: 1px dashed #3870EA;
        cursor: move;
      }
    }
    .panel-handle {
      display: none;
      position: absolute;
      top: 0;
      right: -28px;
      .icon-handle {
        display: block;
        position: relative;
        padding: 5px;
        width: 28px;
        cursor: pointer;
        text-align: center;
        background-color: #fff;
        color: #666;
      }
      .svg-icon {
        width: 16px;
        height: 16px;
      }
    }
    &:hover .panel-handle {
      display: block;
    }
    &:not(.active):hover {
      &::before {
        display: block;
        left: -1px;
        width: 377px;
        border: 1px dashed #3870EA;
      }
    }
    &.active {
      .item-out {
        &::before {
          display: block;
          left: -2px;
          width: 379px;
          border: 2px solid #3870EA;
        }
      }
    }
    & + .floor-item {
      margin-top: -1px;
    }
  }
  .draggable-box-right {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 1;
    width: 360px;
    background-color: #fff;
    overflow-y: auto;
    &::-webkit-scrollbar {
      width: 0;
    }
  }
</style>

